<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>上映影片</title>
    <link rel="stylesheet" th:href="@{/css/semantic.min.css}">
    <link rel="stylesheet" th:href="@{/css/me.css}">
    <script type="text/javascript" th:src="@{/js/jquery-3.4.1.js}"></script>
    <style>
        .detail_h3{
            display: inline-block;
            height: 40px;
            width: 100%;
            line-height: 40px;
            font-size: 20px;
            border-bottom: 1px solid #e5e5e5;
        }
    </style>
</head>
<body>
<div class="ui  top fixed">
    <div class="ui  secondary  pointing borderless massive menu">
        <div class=" header item logo">
            <a href="#"><img th:src="@{/image/logo.png}" alt="logo"></a>
        </div>
        <a th:href="@{/}" class=" item nav-item">
            首页
        </a>
        <a th:href="@{/movieList}" class="active  my-color item nav-item">
            影片
        </a>
        <a th:href="@{/cinemaList}" class="item nav-item">
            影院
        </a>
        <div class='right menu' th:if="${session.user}==null">
            <a th:href='@{/login}' class='item nav-item'>登录</a>
            <a th:href='@{/register}' class='item right-nav-item'>注册</a>
        </div>

        <div class="right menu" th:unless="${session.user}==null">
            <a th:href='@{/user/personalOrder}' class='item right-nav-item'>欢迎,<span th:text="${session.user.username}"></span>用户</a>
            <a th:href='@{/user/logout}' class='item right-nav-item'>退出</a>
        </div>
    </div>
</div>

<div class="detail_bg" >
    <div class="ui m-padded  container">
        <h3 class="detail_title" th:text="${film.name}"></h3>
        <div class="ui  grid">
            <div class="row">
                <div class="four wide column">
                    <img width="210" height="280" th:src="@{${film.picture}}">
                </div>
                <input type="hidden" th:value="${film.id}" id="film_id">
                <div class="nine wide column remove_padding">
                    <ul class="detail_ul">
                        <li>导演：<span th:text="${film.director}"></span></li>
                        <li>主演：<span th:text="${film.actor}"></span></li>
                        <li>类型：<span th:text="${film.type}"></span></li>
                        <li>制片国家/地区：<span th:text="${film.area}"></span></li>
                        <li>片长：<span th:text="${film.length}"></span>分钟</li>
                        <li>剧情介绍：<span th:text="${film.introduce}"></span></li>
                    </ul>
                </div>
                <div class="three wide column remove_padding">
                    <div class="ui grid">
                        <div class="row">
                            <div class="right column white_font_color">
                                上映时间：<span th:text="${#dates.format(film.playTime,'yyyy-MM-dd HH:mm')}"></span>
                            </div>
                        </div>
                        <div class="row">
                            <div class="right column">
                                <img  width="160" height="110" th:src="@{${otherImage}}" alt="">
                            </div>
                        </div>
                        <div class="row">
                            <div class="right column">
                                <a id="video_watch" th:vpath="${videoImage}" th:ipath="${videoUrl}">
                                    <img width="160" height="110" th:src="${videoImage}" alt="">
                                    <div class="watch"></div>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>



<div class="ui container">
    <div class="row add_margin_top">
        <h3 class="detail_h3">选座购票</h3>
    </div>
    <div class="row add_margin_top">
        <div class="ui grid">
            <div class="row remove_padding">
                <div class="three wide column bg_color_red_medium">
                    <div class="text_center_gray">
                        选择区域
                    </div>
                </div>
                <div class="thirteen wide column bg_color_red_thin add_top_bottom_padding" id="area">
                    <a class="area_a select" th:href="@{/detail/{id}(id=${film.id})}">全部区域</a>


                    <a class='area_a' th:each='area:${areas}' th:onclick="|select_area(${area.id},this)|" th:text='${area.name}'></a>

                </div>
            </div>
            <div class="row remove_padding">
                <div class="three wide column bg_color_red_medium">
                    <div class="text_center_gray">
                        选择影城
                    </div>
                </div>
                <div class="thirteen wide column bg_color_red_thin add_top_bottom_padding" id="selected">


                    <span th:each="filmCinema,stat:${filmCinemas}">
                        <input th:if="${stat.first}" type='hidden' th:value='${filmCinema.id}' id='cinema_input'>
                        <a class='area_a' th:classappend="${stat.first}?'select'" th:onclick='|select_cinema(${filmCinema.id},this)|' th:text="${filmCinema.name}"></a>
                    </span>

                </div>
            </div>
            <div class="row remove_padding" th:if="${times}!=null">
                <div class="three wide column bg_color_red_medium">
                    <div class="text_center_gray">
                        选择时间
                    </div>
                </div>
                <div class="thirteen wide column bg_color_red_thin add_top_bottom_padding" id="times">

                   <span th:each="time,stat:${times}">
                        <input th:if="${stat.first}" type='hidden' th:value='${time}' id='time_input'>
                        <a class='area_a' th:classappend="${stat.first}?'select'"  th:onclick='changeTable([[${time}]],this)' th:text="${#dates.format(time,'MM月dd日')}"></a>
                   </span>

                </div>
            </div>
        </div>
    </div>
    <div class="add_margin_top" th:if="${tables}!=null">
        <table class="ui striped table" id="table">
            <thead>
            <th>放映时间</th>
            <th>语言版本</th>
            <th>放映厅</th>
            <th>座位情况</th>
            <th>现价（元）</th>
            <th>选座购票</th>
            </thead>
            <tbody id='table2'>

            <tr th:each="table:${tables}">
            <td th:text="${#dates.format(table.time,'HH:mm')}"></td>
                <td>原语3D</td>
                <td th:text="${table.name}">".$value['name']."</td>
                <td>宽松</td>
                <td th:text="${table.price}">.$value['price']."</td>
                <td><a th:href='@{/user/seatOrder/{id}(id=${table.id})}' class='seat_btn'>选座购票</a></td>
            </tr>

            </tbody>
        </table>

    </div>

</div>







<div class="videos"></div>
<script>
    let film_id=$('#film_id').val();
    let cinema_id=$('#cinema_input').val();

    $('#video_watch').click(function(){ //这个视频被点击后执行
        let img = $(this).attr('vpath');//获取视频预览图
        let video = $(this).attr('ipath');//获取视频路径
        console.log(video);
        $('.videos').html("<video id=\"video\" poster='"+img+"' style='width: 640px' src='"+video+"' preload=\"auto\" controls=\"controls\" autoplay=\"autoplay\"></video><img onClick=\"close1()\" class=\"vclose\" src=\"/image/gb.png\" width=\"25\" height=\"25\"/>");
        $('.videos').show();
    });
    function close1(){
        let v = document.getElementById('video');//获取视频节点
        $('.videos').hide();//点击关闭按钮关闭暂停视频
        v.pause();
        $('.videos').html();
    }

    function select_area(id,e){
        console.log(id);
        $('#area').find("a").each(function () {
            let me = $(this);
            let bool = me.attr("class").indexOf("select");
            if (bool!=-1) {
                me.removeClass("select");
            }
        })
        $(e).addClass('select');
        $.ajax({
            url:'http://localhost:8080/changeCinema',
            method:'get',
            data:{area_id:id,film_id:film_id},
            dataType:'json',
            success:function (res) {
                $('#selected').empty();
                let data=res.data;
                let bool=true;
                data.forEach(function (item) {
                    let element=""
                    if (bool){
                        element="<input type='hidden' value='"+item['id']+"' id='cinema_input'><a class='area_a select' onclick='select_cinema("+item['id']+",this)'>"+item['name']+"</a>";
                        bool=false;
                    }else {
                        element="<a class='area_a' onclick='select_cinema("+item['id']+",this)'>"+item['name']+"</a>";
                    }

                    $('#selected').append(element);
                })
            }
        })

        setTimeout(function () {
            let cinema_ = $('#cinema_input').val();
            $.ajax({
                url: 'http://localhost:8080/getTimes',
                method: 'get',
                data: {id: film_id, cinema_id: cinema_},
                dataType: 'json',
                success: function (res) {
                    $('#times').empty();
                    let data=res.data;
                    let boolean=true;
                    data.forEach(function (item) {
                        let element="";
                        if (boolean){
                            element="  <input  type='hidden' value='"+item+"' id='time_input'>" +
                                "<a class='area_a select' onclick='changeTable("+item+",this)'>"+item.substring(5,7)+"月"+item.substring(8,10)+"日</a>";
                            boolean=false;
                        }else {
                            element= "<a class='area_a' onclick='changeTable("+item+",this)'>"+item.substring(5,7)+"月"+item.substring(8,10)+"日</a>";
                        }
                        $('#times').append(element)
                    })
                }
            })
        },1000)
        setTimeout(function () {
            let time_input=$('#time_input').val();
            let cinema_ = $('#cinema_input').val();
            $.ajax({
                url:'http://localhost:8080/getTable',
                method: 'get',
                data:{id:film_id,time:time_input,cinema_id:cinema_},
                dataType: 'json',
                success:function (res) {
                    $('#table2').empty();
                    let data=res.data;
                    data.forEach(function (item) {
                        let element="<tr><td>"+item['time'].substring(0,5)+"</td><td>原语3D</td>" +
                            "<td>"+item['name']+"</td><td>宽松</td><td>"+item['price']+"</td>" +
                            "<td><a href='/user/seatOrder/"+item['id']+"' class='seat_btn'>选座购票</a></td></tr>";
                        $('#table2').append(element)
                    })
                }
            })
        },1500)


    }

    function select_cinema(id,e) {
        cinema_id=id;
        $('#selected').find("a").each(function () {
            let me = $(this);
            let bool = me.attr("class").indexOf("select");
            if (bool!=-1) {
                me.removeClass("select");
            }
        })
        $(e).addClass('select');
        $.ajax({
            url:'http://localhost:8080/getTimes',
            method: 'get',
            data:{id:film_id,cinema_id:id},
            dataType: 'json',
            success:function (res) {
                $('#times').empty();
                let data=res.data;
                let boolean=true;
                data.forEach(function (item) {
                    let element="";
                    if (boolean){
                        element="  <input  type='hidden' value='"+item+"' id='time_input'>" +
                            "<a class='area_a select' onclick='changeTable(\""+item+"\",this)'>"+item.substring(5,7)+"月"+item.substring(8,10)+"日</a>";
                        boolean=false;
                    }else {
                        element= "<a class='area_a' onclick='changeTable(\""+item+"\",this)'>"+item.substring(5,7)+"月"+item.substring(8,10)+"日</a>";
                    }

                $('#times').append(element)
                })
            }
        })
        setTimeout(function (){
            let time_input=$('#time_input').val();
            if (time_input==null) {
                $('#table2').empty();
            }else {
            $.ajax({
                url:'http://localhost:8080/getTable',
                method: 'get',
                data:{id:film_id,time:time_input,cinema_id:id},
                dataType: 'json',
                success:function (res) {
                    $('#table2').empty();
                    let data=res.data;
                    data.forEach(function (item) {
                        let element="<tr><td>"+item['time'].substring(0,5)+"</td><td>原语3D</td>" +
                            "<td>"+item['name']+"</td><td>宽松</td><td>"+item['price']+"</td>" +
                            "<td><a href='/user/seatOrder/"+item['id']+"' class='seat_btn'>选座购票</a></td></tr>";
                        $('#table2').append(element)
                    })
                }
            })
        }

        },1000)


    }

    function changeTable(time,e) {
        $('#times').find("a").each(function () {
            let me = $(this);
            let bool = me.attr("class").indexOf("select");
            if (bool!=-1) {
                me.removeClass("select");
            }
        })
        $(e).addClass('select');
        $.ajax({
            url:'http://localhost:8080/getTable',
            method: 'get',
            data:{id:film_id,time:time,cinema_id:cinema_id},
            dataType: 'json',
            success:function (res) {
                $('#table2').empty();
                let data=res.data;
                data.forEach(function (item) {
                    let element="<tr><td>"+item['time'].substring(0,5)+"</td><td>原语3D</td>" +
                        "<td>"+item['name']+"</td><td>宽松</td><td>"+item['price']+"</td>" +
                    "<td><a href='/user/seatOrder/"+item['id']+"' class='seat_btn'>选座购票</a></td></tr>";
                    $('#table2').append(element)
                })

            }
        })
    }
</script>
</body>
</html>